/*! 变量 */
$primary-color: #08c;
$primary-border: 1px solid $primary-color;

.box {
  background-color: $primary-color;
  border: $primary-border;
}
/*! 嵌套 */
div {
  height: 30px;
  p {
    overflow: hidden;
    background-color: #fff;
  }
}
/*! 嵌套中用父选择器 */
.link {
  display: block;
  &:hover {
    color: $primary-color;
  }
  & &-primary {
    border: $primary-border;
  }
}
/*! 嵌套属性 */
body {
  font: {
    family: sans-serif;
    size: 16px;
    weight: bold;
  }
}
.nav {
  border: 1px solid #f00 {
    left: 0;
    right: 0;
  }
}

/*! mixin 混合 */
@mixin alert {
  color: #08c;
  background-color: pink;
  a {
    text-decoration: underline;
  }
}
.alert-warning {
  @include alert;
}
/*! mixin 参数 */
@mixin alert($color, $bgColor) {
  color: $color;
  background-color: $bgColor;
  a {
    text-decoration: underline;
    color: darken($color, 10%);
  }
}
.alert-warning {
  @include alert(#08c, pink);
}
.alert-info {
  @include alert($bgColor: orange, $color: #333);
}
/*! 继承/扩展-inheritance */
.list {
  border: 1px solid #333;
  color: bisque;
  .item {
    text-decoration: underline;
  }
}
.note {
  @extend .list;
  font-size: 20px;
  font-weight: bold;
}
/*! Partials @import */
@import "header"; // sass
@import "footer"; // css

/*! 注释 */
/* 多行注释
 * 会包含在没有压缩之后的css里
 * 压缩的文件不会包含 */

// 单行注释，压不压缩都不会保存

/*! 数字 */
.box {
  font-size: 5px + 5px;
  line-height: calc(48 / 2);
}

/*! 数字函数 */
.box {
  font-size: abs(-5px);
  line-height: round(3.8);
  line-height: round(3.2);
  line-height: ceil(3.2);
  line-height: floor(3.8);
  // width: percentage(650px / 1000px);
  height: min(1, 2, 3);
  height: max(1, 2, 3);
}

/*! 字符串 */
.box {
  font-family: "ning" + hao;
  font-family: ning + "hao";
  font-family: "ning" + "hao";
  font-family: ning + hao;
}

/*! 字符串函数 */
$greeting: "hello zhangqi";

.box {
  font-family: to-upper-case($greeting);
  font-family: to-lower-case($greeting);
  font-family: str-length($greeting);
  font-family: str-index($greeting, "hello");
  font-family: str-index($greeting, "zhangqi");
  font-family: str-index($greeting, "o z");
  font-family: str-insert($greeting, ".net", 14);
}

/*! color */
.box {
  background-color: rgb(255, 0, 0);
  background-color: hsl(20, 100%, 60%);
}

/*! adjust-hue */
$base-color: #ff0000;
$base-color-hsl: hsl(0, 100%, 50%);
.box {
  background-color: adjust-hue($base-color-hsl, 137deg);
}

/*! lighten darken */
.box {
  background-color: lighten($base-color, 30%);
  background-color: darken($base-color, 20%);
}

/*! saturate 增加颜色纯度（饱和度） desaturate 减小纯度 */
$s-color: hsl(0, 50%, 50%);
.box {
  background-color: saturate($s-color, 40%);
  background-color: desaturate($s-color, 20%);
}

/*! transparentize 减小透明度
    opacify 增加透明度 */
$t-color: hsla(222, 100%, 50%, 0.5);
.box {
  background-color: opacify($t-color, 0.2);
  background-color: transparentize($t-color, 0.2);
}

/*! List 列表 */
.box {
  width: length(5px 10px);
  height: nth(5px 10px, 2);
  width: index(1px solid red, red);
  padding: append(5px 10px, 5px);
  margin: join(0 10px, 3px 3px);
  margin: join(0 10px, 3px 3px, comma);
}

/*! Map */
$colors: (
  primary: #08c,
  info: #333,
  warning: orange,
);
$newColors: map-merge(
  $colors,
  (
    error: #f00,
  )
);
.box {
  width: length($colors);
  background-color: map-get($colors, primary);
  color: map-get($colors, "info");
  font-family: "#{map-keys($colors)}";
  font-family: map-values($colors);
  font-family: map-has-key($colors, primary);
  font-family: map-get($newColors, error);
}

/*! Boolean */
.box {
  width: 5px > 3px;
  width: 5px < 3px;
  width: (5px > 3px) and (5px < 10px);
  width: (5px > 3px) and (5px > 10px);
  width: (5px > 3px) or (5px < 10px);
  width: (5px > 3px) or (5px > 10px);
  width: not(5px > 3px);
  width: not(5px < 3px);
}
/*! interpolation */
$version: "0.0.1";
/* 当前版本号：#{$version} */
$name: "info";
$attr: "height";
.alert-#{$name} {
  #{$attr}: 10px;
}

/*! @if */
$use-prefixes: true;
.rounded {
  @if $use-prefixes {
    -webkit-border-raduis: 5px;
  }
  border-radius: 5px;
}
$theme: "as";
body {
  @if $theme == dark {
    background-color: #000;
  } @else if $theme == light {
    background-color: #fff;
  } @else {
    background-color: #08c;
  }
}

/*! @for */
@for $i from 1 through 3 {
  .item-#{$i} {
    height: ($i * 10) + "px";
  }
}
@for $i from 1 to 3 {
  .note-#{$i} {
    height: ($i * 10) + "px";
  }
}
/*! @each */
@each $i in 1, 2, 3 {
  .item-#{$i} {
    height: 10px;
  }
}
$colorStatus: primary info warning;
@each $s in $colorStatus {
  .btn-#{$s} {
    color: map-get($colors, $s);
  }
}
$size: (
  small: 12px,
  middle: 16px,
  large: 24px,
);
@each $s, $n in $size {
  .btn-#{$s} {
    font-size: $n;
  }
}
@each $color, $border in (aqua, dotted), (red, solid), (green, double) {
  .#{$border} {
    background-color: $color;
    border: 1px $border $color;
  }
}
/*! @while */
$num: 5;
@while $num > 0 {
  .box-#{$num} {
    width: 10px;
  }
  $num: $num - 1;
}
/*! @function */
@function get-color($color) {
  @if not map-has-key($colors, $color) {
    // @warn "thers is no #{$color} key";
    @error "thers is no #{$color} key";
  }
  @return map-get($colors, $color);
}
@each $c in primary, info, warning {
  .text-#{$c} {
    color: get-color($c);
  }
}
.box {
  color: get-color(error);
}
/*! 警告或错误 */
// @warn "thers is no key";
// @error "thers is no key";
